<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" th:replace="~{layout/base :: layout(~{::title}, ~{::content}, ~{::css}, ~{::js})}">
<head>
    <title>笔记管理 - 笔记管理系统</title>
    <th:block th:fragment="css">
        <style>
            .search-bar {
                background: white;
                border-radius: 10px;
                padding: 20px;
                margin-bottom: 20px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            }
            .note-item {
                background: white;
                border-radius: 10px;
                padding: 20px;
                margin-bottom: 20px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                border-left: 4px solid #007bff;
                transition: all 0.3s;
            }
            .note-item:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            }
            .note-title {
                font-size: 1.3rem;
                font-weight: 600;
                color: #333;
                margin-bottom: 10px;
            }
            .note-title a {
                color: inherit;
                text-decoration: none;
            }
            .note-title a:hover {
                color: #007bff;
            }
            .note-summary {
                color: #666;
                line-height: 1.6;
                margin-bottom: 15px;
            }
            .note-meta {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 0.9rem;
                color: #999;
            }
            .note-actions {
                display: flex;
                gap: 10px;
            }
            .btn-sm {
                padding: 5px 12px;
                font-size: 0.875rem;
            }
            .pagination-wrapper {
                display: flex;
                justify-content: center;
                margin-top: 30px;
            }
            .empty-state {
                text-align: center;
                padding: 60px 20px;
                color: #666;
            }
            .empty-state i {
                font-size: 4rem;
                color: #ddd;
                margin-bottom: 20px;
            }
        </style>
    </th:block>
</head>
<body>
    <div th:fragment="content">
        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>
                <i class="fas fa-sticky-note me-2"></i>笔记管理
            </h2>
            <a href="/note/add" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>新建笔记
            </a>
        </div>

        <!-- 搜索栏 -->
        <div class="search-bar">
            <form id="searchForm" class="row g-3">
                <div class="col-md-4">
                    <label for="title" class="form-label">标题</label>
                    <input type="text" class="form-control" id="title" name="title" placeholder="搜索笔记标题">
                </div>
                <div class="col-md-3">
                    <label for="categoryId" class="form-label">分类</label>
                    <select class="form-select" id="categoryId" name="categoryId">
                        <option value="">全部分类</option>
                        <!-- 分类选项将通过AJAX加载 -->
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="status" class="form-label">状态</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">全部状态</option>
                        <option value="0">草稿</option>
                        <option value="1">已发布</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search me-1"></i>搜索
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 笔记列表 -->
        <div id="noteList">
            <!-- 笔记项将通过AJAX加载 -->
        </div>

        <!-- 分页 -->
        <div id="pagination" class="pagination-wrapper">
            <!-- 分页将通过AJAX加载 -->
        </div>
    </div>

    <th:block th:fragment="js">
        <script>
            let currentPage = 1;
            let pageSize = 10;

            $(document).ready(function() {
                loadCategories();
                loadNotes();

                // 搜索表单提交
                $('#searchForm').on('submit', function(e) {
                    e.preventDefault();
                    currentPage = 1;
                    loadNotes();
                });
            });

            // 加载分类列表
            function loadCategories() {
                $.get('/note/category/listWithCount', function(data) {
                    if (data.code === 200) {
                        let options = '<option value="">全部分类</option>';
                        data.data.forEach(function(category) {
                            options += `<option value="${category.id}">${category.categoryName} (${category.noteCount})</option>`;
                        });
                        $('#categoryId').html(options);
                    }
                });
            }

            // 加载笔记列表
            function loadNotes() {
                let formData = $('#searchForm').serialize();
                formData += `&pageNum=${currentPage}&pageSize=${pageSize}`;

                $.post('/note/list', formData, function(data) {
                    if (data.code === 200) {
                        renderNotes(data.data.records);
                        renderPagination(data.data);
                    } else {
                        showError('加载笔记列表失败：' + data.msg);
                    }
                });
            }

            // 渲染笔记列表
            function renderNotes(notes) {
                let html = '';
                
                if (notes.length === 0) {
                    html = `
                        <div class="empty-state">
                            <i class="fas fa-sticky-note"></i>
                            <h4>暂无笔记</h4>
                            <p>还没有创建任何笔记，<a href="/note/add">立即创建</a>第一篇笔记吧！</p>
                        </div>
                    `;
                } else {
                    notes.forEach(function(note) {
                        let tags = note.tagNames ? note.tagNames.split(',').map(tag => 
                            `<span class="tag">${tag}</span>`
                        ).join('') : '';
                        
                        let statusBadge = note.status === 1 ? 
                            '<span class="badge bg-success">已发布</span>' : 
                            '<span class="badge bg-secondary">草稿</span>';
                        
                        let topBadge = note.isTop === 1 ? 
                            '<span class="badge bg-warning text-dark ms-1">置顶</span>' : '';
                        
                        let publicBadge = note.isPublic === 1 ? 
                            '<span class="badge bg-info ms-1">公开</span>' : 
                            '<span class="badge bg-dark ms-1">私有</span>';

                        html += `
                            <div class="note-item">
                                <div class="note-title">
                                    <a href="/note/detail/${note.id}">${note.title}</a>
                                    ${statusBadge}${topBadge}${publicBadge}
                                </div>
                                <div class="note-summary">${note.summary || '暂无摘要'}</div>
                                <div class="note-meta">
                                    <div>
                                        <span class="category-badge">${note.categoryName || '未分类'}</span>
                                        ${tags}
                                    </div>
                                    <div>
                                        <i class="fas fa-eye me-1"></i>${note.viewCount || 0}
                                        <i class="fas fa-heart ms-2 me-1"></i>${note.likeCount || 0}
                                        <span class="ms-2">${formatDate(note.createTime)}</span>
                                    </div>
                                </div>
                                <div class="note-actions mt-3">
                                    <a href="/note/edit/${note.id}" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-edit me-1"></i>编辑
                                    </a>
                                    <button class="btn btn-outline-success btn-sm" onclick="toggleTop(${note.id}, ${note.isTop === 1 ? 0 : 1})">
                                        <i class="fas fa-thumbtack me-1"></i>${note.isTop === 1 ? '取消置顶' : '置顶'}
                                    </button>
                                    <button class="btn btn-outline-info btn-sm" onclick="togglePublic(${note.id}, ${note.isPublic === 1 ? 0 : 1})">
                                        <i class="fas fa-eye me-1"></i>${note.isPublic === 1 ? '设为私有' : '设为公开'}
                                    </button>
                                    <button class="btn btn-outline-danger btn-sm" onclick="deleteNote(${note.id})">
                                        <i class="fas fa-trash me-1"></i>删除
                                    </button>
                                </div>
                            </div>
                        `;
                    });
                }
                
                $('#noteList').html(html);
            }

            // 渲染分页
            function renderPagination(pageData) {
                if (pageData.pages <= 1) {
                    $('#pagination').html('');
                    return;
                }

                let html = '<nav><ul class="pagination">';
                
                // 上一页
                if (pageData.current > 1) {
                    html += `<li class="page-item"><a class="page-link" href="#" onclick="changePage(${pageData.current - 1})">上一页</a></li>`;
                }
                
                // 页码
                let start = Math.max(1, pageData.current - 2);
                let end = Math.min(pageData.pages, pageData.current + 2);
                
                for (let i = start; i <= end; i++) {
                    let active = i === pageData.current ? 'active' : '';
                    html += `<li class="page-item ${active}"><a class="page-link" href="#" onclick="changePage(${i})">${i}</a></li>`;
                }
                
                // 下一页
                if (pageData.current < pageData.pages) {
                    html += `<li class="page-item"><a class="page-link" href="#" onclick="changePage(${pageData.current + 1})">下一页</a></li>`;
                }
                
                html += '</ul></nav>';
                $('#pagination').html(html);
            }

            // 切换页面
            function changePage(page) {
                currentPage = page;
                loadNotes();
            }

            // 切换置顶状态
            function toggleTop(noteId, isTop) {
                $.post('/note/top', {noteId: noteId, isTop: isTop}, function(data) {
                    if (data.code === 200) {
                        showSuccess(isTop ? '置顶成功' : '取消置顶成功');
                        loadNotes();
                    } else {
                        showError('操作失败：' + data.msg);
                    }
                });
            }

            // 切换公开状态
            function togglePublic(noteId, isPublic) {
                $.post('/note/public', {noteId: noteId, isPublic: isPublic}, function(data) {
                    if (data.code === 200) {
                        showSuccess(isPublic ? '设为公开成功' : '设为私有成功');
                        loadNotes();
                    } else {
                        showError('操作失败：' + data.msg);
                    }
                });
            }

            // 删除笔记
            function deleteNote(noteId) {
                if (confirm('确定要删除这篇笔记吗？')) {
                    $.post('/note/remove', {ids: noteId}, function(data) {
                        if (data.code === 200) {
                            showSuccess('删除成功');
                            loadNotes();
                        } else {
                            showError('删除失败：' + data.msg);
                        }
                    });
                }
            }

            // 格式化日期
            function formatDate(dateStr) {
                if (!dateStr) return '';
                let date = new Date(dateStr);
                return date.getFullYear() + '-' + 
                       String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                       String(date.getDate()).padStart(2, '0');
            }

            // 显示成功消息
            function showSuccess(message) {
                alert(message); // 简单实现，可以替换为更好的提示组件
            }

            // 显示错误消息
            function showError(message) {
                alert(message); // 简单实现，可以替换为更好的提示组件
            }
        </script>
    </th:block>
</body>
</html>